<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Track</title>
<style type="text/css">
    html{height:100%}
    body{height:100%;margin:0px;padding:0px}
        #container{height:90%;width:100%;}
    #controller{height:35px; width:100%; background-color:lightblue;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2&ak=3ib2bgKAKW91HGpPXRrI9gC35OFXiGss"></script>
<script type="text/javascript">
var map; //百度地图对象
var car; //汽车图标
var label; //信息标签
var centerPoint; //中心坐标
var index = 0; //记录移动到的位置
var points; //主要关键点
var stepPoints = [];
long= 31.3626;
lat= 120.953;
function initMap() {
    //初始化地图,选取第一个点为起始点
    map = new BMap.Map("container");
    map.centerAndZoom(new BMap.Point(lat,long), 18);
    map.enableScrollWheelZoom();
    map.addControl(new BMap.NavigationControl());
        //添加标识
        var  copyrightControl= new BMap.CopyrightControl({
                anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
                offset: new BMap.Size(10, 10)
        });
        map.addControl(copyrightControl);
        copyrightControl.addCopyright({id: 1,content: "<a style='font-size:30px;background:white'>MarkoXu</a>",});
        //点击拾取坐标
        map.addEventListener("click", function(e){
                var infowindowOptions = {width:80, height:30, title:"地理坐标:", };
                var infoWindow = new BMap.InfoWindow(e.point.lng + "," + e.point.lat, infowindowOptions);
                map.openInfoWindow(infoWindow, e.point);
        });
    //搜索产生一条路线
        var drivngOpts = {	renderOptions:{
                                                                                map:map,
                                                                                enableDragging: true,
                                                                                selectFirstResult:true,
                                                                                autoViewport:false
                                                                        },
                                                policy:BMAP_DRIVING_POLICY_LEAST_TIME,
                                                onPolylinesSet: function(routes){
                                                                                                                for(var i=0;i<routes.length;i++){
                                                                                                                        var polyLine = routes[i].getPolyline();
                                                                                                                        polyLine.setStrokeColor("blue");
                                                                                                                        polyLine.setStrokeStyle("dashed");
                                                                                                                }
                                                                                                }
                                        };
    var driving = new BMap.DrivingRoute(map, drivngOpts);
        //设置起始点和终点，允许拖拽
        var startPoint = new BMap.Point(lat,long);
        var endPoint = new BMap.Point(lat,long);
    driving.search(startPoint, endPoint);
        //搜索的回调函数
    driving.setSearchCompleteCallback(function(){
                //清空重新显示
                map.clearOverlays();
                //拼接所有的路径
                points = [];
                var routePlan = driving.getResults().getPlan(0)
                for(var i = 0;i < routePlan.getNumRoutes();i++){
                        points.push.apply(points,routePlan.getRoute(i).getPath());
                }
        centerPoint = new BMap.Point((points[0].lng + points[points.length - 1].lng) / 2, (points[0].lat + points[points.length - 1].lat) / 2);
        map.panTo(centerPoint);
        //设置小车的label
        label = new BMap.Label("", {offset: new BMap.Size(-50, -50)});
        car = new BMap.Marker(points[0]);
        car.setLabel(label);
        map.addOverlay(car);
                //去除转弯相同的关键点
                for(var i = 0; i < points.length - 1; i++){
                        if(points[i].lng == points[i+1].lng && points[i].lat == points[i+1].lat){
                                points.splice(i, 1);
                        }
                }
                //显示关键点坐标，不内插路径点
                var stepgOpts = {
                        size: BMAP_POINT_SIZE_BIG,
                        shape: BMAP_POINT_SHAPE_CIRCLE,
                        color: 'blue'
                }
                var stepCollection = new BMap.PointCollection(points, stepgOpts);
                map.addOverlay(stepCollection);
                //将index更新为0
                index = 0;
    });
}


function play(){
    var point = points[index];
    label.setContent("MarkoXu<br>" + "经度: " + point.lng.toFixed(5) + "<br>纬度: " + point.lat.toFixed(5));
    car.setPosition(point);
    map.panTo(point);
        if(index == 0){
                map.addOverlay(new BMap.Polyline([points[0], point], {strokeColor: "red", strokeWeight: 3, strokeOpacity: 1}));
        }
    else{
        map.addOverlay(new BMap.Polyline([points[index - 1], point], {strokeColor: "red", strokeWeight: 3, strokeOpacity: 1}));
    }
    index++;
    if(index == points.length){
        map.panTo(point);
                index = 0;
    }
}


function reset(){
    index = 0;
    car.setPosition(points[0]);
    map.panTo(centerPoint);
}

</script>
</head>

<body onload="initMap();">
        <div id="container"></div>
    <div id="controller" align="center">
        <input id="play" type="button" value="下一步" onclick="play();" />
        <input id="reset" type="button" value="返回起点" onclick="reset()" />
    </div>
</body>
</html>
